package com.example.app.pages.main.home.accountList

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.heightIn
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.ListItemDefaults
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.collectAsState
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import com.example.app.components.MyDivider.MyDivider
import com.example.app.components.MyDivider.MyDividerDirection
import com.example.app.components.MyImage.MyAsyncSvgImage
import com.example.app.components.MyListItem.MyListItem
import com.example.app.components.MySpacer.MySpacer
import com.example.app.components.MyText.MyText
import com.example.app.data.bean.routeAccount.AccountRecord
import com.example.app.pages.main.home.accountList.viewModel.AccountListViewModel
import com.example.app.ui.theme.middleSpacer
import com.example.app.ui.theme.my_description_color
import com.example.app.ui.theme.shapeLarge
import com.example.app.util.formatTimestamp
import com.example.app.util.formatTimestampToChineseWeekday

@Composable
fun AccountListItem(
        accountRecord: AccountRecord,
        index: Int,
        accountRecordList: MutableList<AccountRecord>,
        accountListViewModel: AccountListViewModel,
        statusBarPadding: Dp,
        topBarHeight: Dp
) {
    if (accountRecord != null) {
        MyListItem(
            modifier = Modifier
                .clip(
                    RoundedCornerShape(
                        topStart = if (index === 0) shapeLarge else 0.dp,
                        topEnd = if (index === 0) shapeLarge else 0.dp,
                        bottomEnd = if (index === accountRecordList.size - 1) shapeLarge else 0.dp,
                        bottomStart = if (index === accountRecordList.size - 1) shapeLarge else 0.dp,
                    )
                ),
            hasWrap = true,
            headlineContent = {
                Column(
                    modifier = Modifier.fillMaxWidth()
                ) {
                    Row(
                        modifier = Modifier.fillMaxWidth(),
                        horizontalArrangement = Arrangement.SpaceBetween,
                        verticalAlignment = Alignment.CenterVertically
                    ) {
                        MyText(
                            text = formatTimestampToChineseWeekday(
                                accountRecord.CreateAt.toLong(),
                                "yyyy/MM/dd hh:mm"
                            ).first,
                            style = MaterialTheme.typography.bodySmall.copy(
                                color = my_description_color
                            )
                        )
                        MyText(
                            text = formatTimestampToChineseWeekday(
                                accountRecord.CreateAt.toLong()
                            ).second,
                            style = MaterialTheme.typography.bodySmall.copy(
                                color = my_description_color
                            )
                        )
                    }
                    MyDivider(
                        myDividerDirection = MyDividerDirection.HOR,
                        modifier = Modifier.heightIn(6.dp),
                        color = Color.Transparent
                    )
                    Row {
                        MyAsyncSvgImage(
                            path = accountRecord.IconPath,
                            modifier = Modifier.size(30.dp)
                        )
                        MyDivider(
                            myDividerDirection = MyDividerDirection.VER,
                            modifier = Modifier.width(12.dp),
                            color = Color.Transparent
                        )
                        Column(
                            modifier = Modifier
                                .weight(1f)
                                .heightIn(10.dp)
                        ) {
                            MyText(
                                text = accountRecord.TitleName,
                                style = MaterialTheme.typography.bodyMedium
                            )
                            if (!accountRecord.Remark.isEmpty()) {
                                MyText(
                                    text = accountRecord.Remark,
                                    style = MaterialTheme.typography.bodySmall.copy(
                                        color = my_description_color
                                    )
                                )
                            }
                        }
                        MyText(text = accountRecord.Money)
                    }
                    MySpacer(modifier = Modifier.height(middleSpacer))
                    MyDivider(
                        myDividerDirection = MyDividerDirection.HOR,
                        modifier = Modifier
                            .fillMaxWidth()
                            .height(with(LocalDensity.current) {
                                1.dp / 4
                            })
                            .background(MaterialTheme.colorScheme.background.copy(.001f))
                    )
                }
            })
    }
}